import { ref } from 'vue'

const toggleBar = ref<boolean>(false)
const isShowHeader = ref<boolean>(true)
// 检测滚动条向上还是向下
let afterScrollTop = ref<number>(0)
let beforeScrollTop: number

export default () => {
  const getScrollDirection = (): void => {
    beforeScrollTop = getScrollTop()

    window.addEventListener(
      'scroll',
      (): void | boolean => {
        if (toggleBar.value) return
        // 判断侧边栏 是否出来了
        afterScrollTop.value = getScrollTop()

        isShowHeader.value =
          afterScrollTop.value - beforeScrollTop > 0 ? false : true

        beforeScrollTop = afterScrollTop.value
      },
      {
        passive: true,
      }
    )
  }
  getScrollDirection()

  function getScrollTop(): number {
    return document.documentElement.scrollTop || document.body.scrollTop
  }
  return { toggleBar, isShowHeader, afterScrollTop }
}
